revision:
code:
<div id="simulateDarkMode" class="container" data-theme="light">
<button id="toggleDarkMode" type="button" class="btn-toggle" onclick="toggleDarkMode()">
DARK MODE</button>
</div>
<style>
.container { --dark-bg: darkslategray; --dark-color: ghostwhite; --dark-code: gold;
--brand-basic: #dee8f3; --brand-accent: #31456a;}
[data-theme="dark"] {--brand-basic: #31456a; --brand-accent: #dee8f3;}
.container {height: 40vh; width: 40vw;display: flex; justify-content: center; align-items: center;
background-color: var(--brand-basic); transition: color 0.3s, background-color 0.3s;}
.btn-toggle {background-color: var(--brand-basic); color: var(--brand-accent); height: 2.5vw;
width: 9vw; font-size: 1vw; border-radius: 0.25vw; letter-spacing: 0.01vw; font-weight: bold;
display: flex; justify-content: center; align-items: center; transition: color 0.3s,
background-color 0.3s; cursor: pointer; border: 0.2vw solid var(--brand-accent);}
.button-toggle:hover {background-color: var(--brand-accent);color: var(--brand-basic);}
.button-toggle:focus {outline: none;}
</style>
<script>
function toggleDarkMode() {
const container = document.getElementById('simulateDarkMode');
const buttonDarkMode = document.getElementById('toggleDarkMode');
const dataTheme = container.getAttribute('data-theme');
if(dataTheme === 'dark') {
container.setAttribute('data-theme', 'light');
buttonDarkMode.innerHTML = 'DARK MODE';
} else {
container.setAttribute('data-theme', 'dark');
buttonDarkMode.innerHTML = 'LIGHT MODE';
}
}
</script>
<div>
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />
<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
</div>
<style>
#frame{display: flex; flex-flow: row wrap;width: 40vw; height: 10vh;}
.day1 {display: inline-block; background: #eee;color: black;}
.night1 {background: #333; color: white;}
@media (prefers-color-scheme: dark) {
.day.dark-scheme {background: #333; color: white; }
.night.dark-scheme {background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day1.light-scheme1 { background: white; color: #555;}
.night1.light-scheme1 { background: #eee; color: black;}
}
.day1, .night1 {display: inline-block; padding: 1vw; width: 8vw; height: 3vw;
vertical-align: middle;}
</style>
code:
<div id="frame-1">
<nav class="navbar">
<span class="logo">Company Logo</span>
<ul class="nav__lists">
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="theme__switcher">
<button type="button" id="btn-toggle1">toggle</button>
</div>
</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit deserunt sit neque in labore quis
quisquam expedita minus perferendis.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus perferendis.Lorem ipsum dolor
sit amet consectetur adipisicing elit. Odit deserunt sit neque in labore quis quisquam
expedita minus perferendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit deserunt sit neque in labore quis
quisquam expedita minus perferendis.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus perferendis.Lorem ipsum dolor
sit amet consectetur adipisicing elit. Odit deserunt sit neque in labore quis quisquam expedita
minus perferendis.
</main>
</div>
<style>
.navbar {display: flex; padding: 1vw; font-size: 1.3vw; align-items: center;
color: rgb(176, 58, 46); background-color: #fdedec;}
.navbar span { margin-right: auto; }
.logo {font-weight: 600; }
.nav__lists { display: flex; list-style: none; column-gap: 2vw; margin: 0 2vw; }
#btn-toggle1 { cursor: pointer; width: 5vw; height: 2vw; background-color: skyblue;}
main {width: 45vw; height: auto; margin: 2vw auto; font-size: 1vw;line-height: 2;
padding: 1vw 2vw; border-radius: 1vw; box-shadow: 2px 3.5px 5px
rgba(242, 215, 213, 0.4);}
.dark { background: #1f1f1f; color: #fff;}
.light {background: #fff; color: #333;}
</style>
<script>
const themeToggle = document.getElementById("btn-toggle1");
const bodyEl = document.getElementById('frame-1');
function setTheme(theme) {
bodyEl.classList.toggle("dark", theme === "dark");
bodyEl.classList.toggle("light", theme !== "dark");
themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}
function toggleTheme() {
setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");
}
themeToggle.addEventListener("click", toggleTheme);
</script>
</pre>